<template>
   <div class="category">
      <nav-bar class="nav-bar">
        <template v-slot:center>
            商品分类
        </template>
      </nav-bar>
      <div class="content">
        <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
        <scroll id="tab-content" ref="scroll">
            <tab-content-category :subcategories="showSubcategory"></tab-content-category>
            <tab-control id="tab-control" :titles="titles" @tabClick="tabClick"></tab-control>
            <tab-content-detail :category-detail="showCategoryDetail"></tab-content-detail>
        </scroll>
      </div>
   </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import TabMenu from './childComps/TabMenu.vue'
import TabContentCategory from './childComps/TabContentCategory.vue'
import Scroll from '../../components/common/scroll/Scroll.vue'
import TabControl from '../../components/content/tabControl/TabControl.vue'
import TabContentDetail from './childComps/TabContentDetail.vue'

import {getCategory, getSubcategory, getCategoryDetail} from "../../network/category.js";

export default {
   name:'Category',
   data(){
     return {
       categories:[],
       categoryData:{},
       currentIndex:-1,
       currentType:'pop',
       titles:['综合', '新品', '销量'],
       isShow: false
     }
   },
   computed:{
     showSubcategory(){
       if(this.currentIndex === -1){
         return {}
       }
       return this.categoryData[this.currentIndex].subcategories
     },
     showCategoryDetail(){
       if(this.currentIndex === -1) {
         return []
       }
      //  console.log(this.categoryData[this.currentIndex].categoryDetail[this.currentType])
       return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
     }
   },
   components:{
     NavBar,
     TabMenu,
     Scroll,
     TabContentCategory,
     TabControl,
     TabContentDetail
   },
   created(){
     //请求数据
     this._getCategory()
   },
   activated(){
     this.$bus.$on('detailImageLoad',()=>{
       this.$refs.scroll.refresh()
     })
   },
   methods:{
     _getCategory(){
       getCategory()
       .then(res => {
         //1.获取分类数据
         this.categories = res.data.category.list
         //2.初始化每个类别的子数据
         for(let i=0;i<this.categories.length;i++){
           this.categoryData[i] = {
             subcategories:{},
             categoryDetail:{
               'pop':[],
               'new':[],
               'sell':[]
             }
           }
         }
         //3.请求第一个分类数据
         this._getSubcategories(0)
       })
       .catch(err => {
         console.log(err)
       })
     },
     _getSubcategories(index){
       this.currentIndex = index
       const mailKey = this.categories[index].maitKey
       getSubcategory(mailKey).then(res => {
         this.categoryData[index].subcategories = res.data
         this.categoryData = {...this.categoryData}//响应式监听数据
         this._getCategoryDetail('pop')//请求tab-control切换数据
         this._getCategoryDetail('new')
         this._getCategoryDetail('sell')
       }).catch(err => {
         console.log(err)
       })
     },
     _getCategoryDetail(type){
       //获取请求的miniWallKey
       const miniWallkey = this.categories[this.currentIndex].miniWallkey
       //发起请求，传入miniWallKey , type
       getCategoryDetail(miniWallkey,type).then(res => {
       //3.将获取的数据保存下来
       this.categoryData[this.currentIndex].categoryDetail[type] = res
       this.categoryData = {...this.categoryData}
       }).catch(err => {
         console.log(err)
       })
     },
     selectItem(index){//点击分类获取数据
       this._getSubcategories(index)
       this.$refs.scroll.scrollTo(0,0)
     },
     tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
    }
   }
}
</script>

<style scoped>
   .category {
     height: 100vh - 49px;
   }
   .nav-bar {
     background-color: #ff8198;
     color: #fff;
     font-weight: 700;
   }
   .content {
     display: flex;
     width: 100%;
   }
   .content #tab-content {
     flex: 1;
     margin-top: 46px;
     height: calc(100vh - 46px - 49px);
     overflow: hidden;
   }
   .content #tabMenu {
     width: 100px;
   }
   #tab-control {
     margin-top: 20px;
     border-top: 2px solid #f2f2f2;
   }
</style>